<!--
	此示例下载自 https://echarts.apache.org/examples/zh/editor.html?c=bar-y-category-stack
-->
<!DOCTYPE html>
<html lang="en" style="height: 100%">
  <head>
    <meta charset="utf-8" />
  </head>
  <body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>

    <script
      type="text/javascript"
      src="https://registry.npmmirror.com/echarts/5.5.1/files/dist/echarts.min.js"
    ></script>

    <!-- Uncomment this line if you want to dataTool extension
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.5.1/files/dist/extension/dataTool.min.js"></script>
  -->
    <!-- Uncomment this line if you want to use gl extension
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts-gl/2/files/dist/echarts-gl.min.js"></script>
  -->
    <!-- Uncomment this line if you want to echarts-stat extension
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts-stat/latest/files/dist/ecStat.min.js"></script>
  -->
    <!-- Uncomment this line if you want to echarts-graph-modularity extension
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts-graph-modularity/2/files/dist/echarts-graph-modularity.min.js"></script>
  -->
    <!-- Uncomment this line if you want to use map
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts/4.9.0/files/map/js/world.js"></script>
  -->
    <!-- Uncomment these two lines if you want to use bmap extension
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.5.1/files/dist/extension/bmap.min.js"></script>
  -->

    <script type="text/javascript">
      var dom = document.getElementById("container");
      var myChart = echarts.init(dom, null, {
        renderer: "canvas",
        useDirtyRect: false,
      });
      var app = {};

      var option;

      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
          },
        },
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
        },
        yAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: {
            margin: 30,
            fontSize: 14,
          },
          axisPointer: {
            label: {
              show: true,
              margin: 30,
            },
          },
        },
        animationDurationUpdate: 500,
        series: [
          {
            name: "Direct",
            id: "bar3",
            type: "pictorialBar",
            stack: "total",
            color: "#88A2FF",
            symbolRepeat: true,
            symbol: "roundRect",
            symbolSize: ["10%", "20%"],
            barCategoryGap: "40%",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            universalTransition: {
              enabled: true,
              delay: function (idx, total) {
                return (idx / total) * 1000;
              },
            },
            data: [520, 302, 301, 334, 390, 330, 320],
          },
          {
            name: "Mail Ad",
            id: "bar2",
            type: "pictorialBar",
            stack: "total",
            symbolRepeat: true,
            color: "#B4BFD2",
            symbolSize: ["10%", "20%"],
            barCategoryGap: "40%",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            universalTransition: {
              enabled: true,
              delay: function (idx, total) {
                return (idx / total) * 1000;
              },
            },
            data: [620, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "Affiliate Ad",
            type: "pictorialBar",
            id: "bar1",
            stack: "total",
            symbolRepeat: true,
            symbolSize: ["10%", "20%"],
            color: "#7EAC77",
            barCategoryGap: "40%",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            universalTransition: {
              enabled: true,
              delay: function (idx, total) {
                return (idx / total) * 1000;
              },
            },
            data: [220, 182, 191, 234, 290, 330, 310],
          },
        ],
      };

      if (option && typeof option === "object") {
        myChart.setOption(option);
      }

      window.addEventListener("resize", myChart.resize);
    </script>
  </body>
</html>
